<script setup lang="ts">
  import Logo from '@/layouts/header/src/Logo.vue'
  import Nav from '@/layouts/header/src/Nav.vue'
  import Setting from '@/layouts/header/src/Setting.vue'
</script>

<template>
  <header class="header">
    <Logo/>
    <Nav/>
    <Setting/>
  </header>
</template>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  background: var(--bg-major-color);
  color: var(--font-major-color);
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
}
</style>